<style lang="less">
</style>
<template>
  <div>
    <giantTree
      :setting="setting"
      :nodes="nodes"
      @onClick="onClick"
      @onDblClick="onDblClick"
      @onRightClick="onRightClick"
      @onCheck="onCheck"
      @onCreated="handleCreated"
    />
  </div>
</template>

<script>
import giantTree from "vue-giant-tree";
import { getDeviceZTree } from "@/api/monitor";
export default {
  name: "pipe-tree",
  components: {
    giantTree
  },
  data() {
    return {
      nodes: [],
      setting: {
        check: {
          enable: true
        },
        data: {
          simpleData: {
            enable: true,
            pIdKey: "pid"
          }
        },
        view: {
          showIcon: true
          // addHoverDom: this.addHoverDom,
          // removeHoverDom: this.removeHoverDom
        }
      },
      // showIndex: 0,
      ztreeObj: null
    };
  },
  methods: {
    // addHoverDom(treeid, treeNode) {
    //   const item = document.getElementById(`${treeNode.tId}_a`)
    //   if (item && !item.querySelector('.tree_extra_btn')) {
    //     const btn = document.createElement('sapn')
    //     btn.id = `${treeid}_${treeNode.id}_btn`
    //     btn.classList.add('tree_extra_btn')
    //     btn.innerText = '删除'
    //     btn.addEventListener('click', e => {
    //       e.stopPropagation()
    //       this.clickRemove(treeNode)
    //     })
    //     item.appendChild(btn)
    //   }
    // },
    // removeHoverDom(treeid, treeNode) {
    //   const item = document.getElementById(`${treeNode.tId}_a`)
    //   if (item) {
    //     const btn = item.querySelector('.tree_extra_btn')
    //     if (btn) {
    //       item.removeChild(btn)
    //     }
    //   }
    // },
    clickRemove(treeNode) {
      console.log("remove", treeNode);
      this.ztreeObj && this.ztreeObj.removeNode(treeNode);
    },
    onClick: function(evt, treeId, treeNode) {
      // 点击事件
      // console.log(evt.type, treeNode)
      this.$emit("treeClick", treeNode);
    },
    onDblClick(evt, treeId, treeNode) {
      this.$emit("treeDbClick", treeNode);
    },
    onRightClick(evt, treeId, treeNode) {
      this.ztreeObj.selectNode(treeNode);
      this.$emit("treeRightClick", evt, treeNode);
    },
    onCheck: function(evt, treeId, treeNode) {
      // 选中事件
      // console.log(evt.type, treeNode)
      let allCheckedNodes = this.ztreeObj.getCheckedNodes(true);
      this.$emit("treeCheck", treeNode, allCheckedNodes);
    },
    handleCreated: function(ztreeObj) {
      this.ztreeObj = ztreeObj;
      // onCreated 中操作ztreeObj对象展开第一个节点
      ztreeObj.expandNode(ztreeObj.getNodes()[0], true);
    },
    getPipeTree() {
      // 多条件搜索
      this.loading = true;
      getDeviceZTree({}).then(res => {
        this.loading = false;
        if (res.code == 0) {
          res.data.forEach(item => {
            if (item.nodeType == 1) {
              item.icon = "./../static/pipeResource.png";
            } else if (item.nodeType == 2) {
              item.icon = "./../static/pipe.png";
            } else if (item.nodeType == 3) {
              item.icon = "./../static/pipePart.png";
            }
          });
          this.nodes = res.data;
        }
      });
    },
    onSearch() {
      // this.getPipeTree()
      let licnum = "";
      let companyName = "";
      if (this.selectVal == "licnum") {
        licnum = this.searchVal;
      } else {
        companyName = this.searchVal;
      }
      function filterLicnum(node) {
        return node.nodeType == 3 && node.name.indexOf(licnum) > -1;
      }
      function filterCompanyName(node) {
        return node.nodeType == 2 && node.name.indexOf(companyName) > -1;
      }
      if (this.selectVal == "licnum") {
        let nodeList = this.ztreeObj.getNodesByFilter(filterLicnum); // 查找节点集合
        if (nodeList.length > 0) {
          for (var i = nodeList.length - 1; i >= 0; i--) {
            this.ztreeObj.selectNode(nodeList[i]); //会让节点自动滚到到可视区域内
          }
        } else {
          this.$Message.warning("未查询到相关车辆");
        }
      } else {
        let nodeList = this.ztreeObj.getNodesByFilter(filterCompanyName); // 查找节点集合
        if (nodeList.length > 0) {
          for (var i = nodeList.length - 1; i >= 0; i--) {
            this.ztreeObj.selectNode(nodeList[i]); //会让节点自动滚到到可视区域内
          }
        } else {
          this.$Message.warning("未查询到相关企业");
        }
      }
    }
  },
  mounted() {
    this.getPipeTree();
  }
};
</script>